<template>
	<div>
		<el-row :gutter="15">
		<el-form ref="elForm" :model="dataForm" :rules="dataRule" size="small" label-width="100px" label-position="right"  :disabled="setting.readonly" >
		<template v-if="!loading && formOperates">
			<el-col :span="12"    v-if="judgeShow('traveldepartment')" >
				<el-form-item  label="出差部门"  
 prop="traveldepartment" >
					<dep-select  :disabled="judgeWrite('traveldepartment')"  v-model="dataForm.traveldepartment"
 placeholder="请选择"  clearable >

                </dep-select>
                </el-form-item>
            </el-col>

			<el-col :span="12"    v-if="judgeShow('businesstravelers')" >
				<el-form-item  label="出差人员"  
 prop="businesstravelers" >
					<user-select  :disabled="judgeWrite('businesstravelers')"  v-model="dataForm.businesstravelers"
 placeholder="请选择"  clearable >

                </user-select>
                </el-form-item>
            </el-col>

			<el-col :span="12"    v-if="judgeShow('applicant')" >
				<el-form-item  label="申请人"  
 prop="applicant" >
					<user-select  :disabled="judgeWrite('applicant')"  v-model="dataForm.applicant"
 placeholder="请选择"  clearable >

                </user-select>
                </el-form-item>
            </el-col>

			<el-col :span="12"    v-if="judgeShow('duties')" >
				<el-form-item  label="职务"  
 prop="duties" >
					<pos-select  :disabled="judgeWrite('duties')"  v-model="dataForm.duties"
 placeholder="请选择"  clearable >

                </pos-select>
                </el-form-item>
            </el-col>

			<el-col :span="24"    v-if="judgeShow('businesstripreasons')" >
				<el-form-item  label="出差事由"  
 prop="businesstripreasons" >
					<el-input  :disabled="judgeWrite('businesstripreasons')"  v-model="dataForm.businesstripreasons"
 placeholder="请输入"  clearable  :style='{"width":"100%"}'>

                </el-input>
                </el-form-item>
            </el-col>

			<el-col :span="24"    v-if="judgeShow('businesstriplocation')" >
				<el-form-item  label="出差地点"  
 prop="businesstriplocation" >
					<el-input  :disabled="judgeWrite('businesstriplocation')"  v-model="dataForm.businesstriplocation"
 placeholder="请输入"  clearable  :style='{"width":"100%"}'>

                </el-input>
                </el-form-item>
            </el-col>

			<el-col :span="12"    v-if="judgeShow('intime')" >
				<el-form-item  label="出差开始时间"  
 prop="intime" >
					<el-date-picker  :disabled="judgeWrite('intime')"  v-model="dataForm.intime"
 placeholder="请选择"  clearable  :style='{"width":"100%"}' type="date"  format="yyyy-MM-dd"  value-format="timestamp" >

                </el-date-picker>
                </el-form-item>
            </el-col>

			<el-col :span="12"    v-if="judgeShow('outtime')" >
				<el-form-item  label="出差结束时间"  
 prop="outtime" >
					<el-date-picker  :disabled="judgeWrite('outtime')"  v-model="dataForm.outtime"
 placeholder="请选择"  clearable  :style='{"width":"100%"}' type="date"  format="yyyy-MM-dd"  value-format="timestamp" >

                </el-date-picker>
                </el-form-item>
            </el-col>

			<el-col :span="24"    v-if="judgeShow('transportation')" >
				<el-form-item  label="交通工具"  
 prop="transportation" >
					<el-radio-group  :disabled="judgeWrite('transportation')"  v-model="dataForm.transportation"
 size="small" >
                            <el-radio v-for="(item, index) in transportationOptions" :key="index" :label="item.id" :disabled="item.disabled" >
                                {{item.fullName}}
                            </el-radio>

                </el-radio-group>
                </el-form-item>
            </el-col>


			<el-col :span="24"    v-if="judgeShow('remark')" >
				<el-form-item  label="备注"  
 prop="remark" >
					<el-input  :disabled="judgeWrite('remark')"  v-model="dataForm.remark"
 placeholder="请输入"  :style='{"width":"100%"}' true  type="textarea"  :autosize='{"minRows":4,"maxRows":4}' >

                </el-input>
                </el-form-item>
            </el-col>



			</template>
		</el-form>
		</el-row>
		<UserBox v-if="userBoxVisible" ref="userBox" @submit="submit" />
	</div>
</template>
<script>
	import request from '@/utils/request'
	import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
	import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
	export default {
		components: {},
		props: [],
		data() {
			return {
				visible: false,
				loading: false,
				setting:{},
				eventType: '',
				userBoxVisible:false,
				dataForm: {
					id:'',
					flowId: '',
					status: 1,
					freeapproveruserid: '',
									traveldepartment : '',
									businesstravelers : '',
									applicant : '',
									duties : '',
									businesstripreasons : '',
									businesstriplocation : '',
									intime : '',
									outtime : '',
									transportation : ["5"],
									orderno : '',
									remark : '',
									creatoruserid : "",
									creatortime : "",
            },
			tableRequiredData: {},
				dataRule:
            {
            },
                        transportationOptions:[{"fullName":"单位派车","id":"1"},{"fullName":"公交/出租车","id":"2"},{"fullName":"火车","id":"3"},{"fullName":"飞机","id":"4"},{"fullName":"其他","id":"5"}],

			}
		},
		computed: {
			formOperates() {
				return this.setting.formOperates
			}
		},
        watch: {},
		created() {
        },
		mounted() {},
		methods: {
			judgeShow(id) {
				if (!this.setting.formOperates || !this.setting.formOperates.length) return true
				let arr = this.setting.formOperates.filter(o => o.id === id) || []
				if (!arr.length) return true
				let item = arr[0]
				return item.read
			},
			judgeWrite(id) {
				if (!this.setting.formOperates || !this.setting.formOperates.length) return false
				let arr = this.setting.formOperates.filter(o => o.id === id) || []
				if (!arr.length) return true
				let item = arr[0]
				return !item.write
			},
                goBack() {
                    this.$emit('refresh')
                },
            init(data) {
                this.dataForm.id = data.id || "";
				this.setting = data;
                this.visible = true;
				this.updateDataRule()
                this.$nextTick(() => {
                    this.$refs['elForm'].resetFields();
                    if(this.dataForm.id){
                        this.loading = true
                        request({
                            url: '/api/example/BusBusinessTripApplication/'+this.dataForm.id,
                            method: 'get'
                        }).then(res => {
                            this.dataInfo(res.data)
                            this.loading = false
                        })
                    }
					this.$emit('setPageLoad')
                })
				this.$store.commit('generator/UPDATE_RELATION_DATA', {})
            },
			updateDataRule() {
				let newRules = {}
				for (let i = 0; i < this.setting.formOperates.length; i++) {
					const item = this.setting.formOperates[i]
					if (!item.id.includes('-')) {
						const newRulesItem = {
							required: item.required,
							message: item.name + '不能为空',
							trigger: item.trigger || 'blur'
						}
						if (!this.dataRule.hasOwnProperty(item.id)) {
							if (item.required) this.$set(newRules, item.id, [newRulesItem])
						} else {
							let withoutRequiredItem = true
							for (let i = 0; i < this.dataRule[item.id].length; i++) {
								if (this.dataRule[item.id][i].hasOwnProperty('required')) {
									this.dataRule[item.id][i].required = item.required
									withoutRequiredItem = false
								}
							}
							if (withoutRequiredItem && item.required) this.dataRule[item.id].push(newRulesItem)
						}
					} else {
						let key = item.id.split('-')[0]
						let newId = item.id.split('-')[1]
						let newItem = {
							...item,
							id: newId
						}
						if (!this.tableRequiredData.hasOwnProperty(key)) {
							this.$set(this.tableRequiredData, key, [newItem])
						} else {
							this.tableRequiredData[key].push(newItem)
						}
					}
				}
				this.dataRule = { ...this.dataRule, ...newRules }
			},
			exist() {
				let isOk = true
				for (let key in this.tableRequiredData) {
					if (this.dataForm[key] && Array.isArray(this.dataForm[key])) {
						for (let i = 0; i < this.dataForm[key].length; i++) {
							let item = this.dataForm[key][i]
							inner: for (let id in item) {
								let arr = this.tableRequiredData[key].filter(o => o.id === id) || []
								if (!arr.length) continue inner
								if (arr[0].required) {
									let msg = `${arr[0].name}不能为空`
									let boo = true
									if (arr[0].dataType === 'array') {
										boo = !this.jnpf.isEmptyArray(item[id])
									} else {
										boo = !this.jnpf.isEmpty(item[id])
									}
									if (!boo) {
										this.$message({
											message: msg,
											type: 'error',
											duration: 1000
										})
										isOk = false
										break
									}
								}
							}
						}
					}
				}
				return isOk
			},
			judgeRequired(id) {
				if (!this.formOperates || !this.formOperates.length) return false
				let arr = this.formOperates.filter(o => o.id === id) || []
				if (!arr.length) return false
				let item = arr[0]
				return item.required
			},
            // 表单提交
            dataFormSubmit(eventType) {
                this.$refs['elForm'].validate((valid) => {
					if (valid) {
						if (this.exist && !this.exist()) return
						if (eventType === 'audit' || eventType === 'reject') {
							this.$emit('eventReceiver', this.dataForm, eventType)
							return
						}
						this.dataForm.status = eventType === 'submit' ? 0 : 1
						this.dataForm.flowId=this.setting.flowId
						this.eventType = eventType
						if (this.eventType === 'submit') {
							this.$confirm('您确定要提交当前流程吗, 是否继续?', '提示', {
								type: 'warning'
							}).then(() => {
								this.request()
							}).catch(() => { });
						} else {
							this.request()
						}
					}
                })
            },
            request() {
                var _data =this.dataList()
                if (!this.dataForm.id) {
                    request({
                        url: '/api/example/BusBusinessTripApplication',
                        method: 'post',
                        data: _data
                    }).then((res) => {
                        this.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 1000,
                            onClose: () => {
                                this.visible = false
								this.$emit('close', true)
                            }
                        })
                    })
                }else{
                    request({
                        url: '/api/example/BusBusinessTripApplication/'+this.dataForm.id,
                        method: 'PUT',
                        data: _data
                    }).then((res) => {
                        this.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 1000,
                            onClose: () => {
                                this.visible = false
								this.$emit('close', true)
                            }
                        })
                    })
                }
            },
            dataList(){
                var _data = JSON.parse(JSON.stringify(this.dataForm));
                        _data.transportation = JSON.stringify(_data.transportation)
                return _data;
            },
            dataInfo(dataAll){
                let _dataAll =dataAll
                        _dataAll.transportation = JSON.parse( _dataAll.transportation)
                this.dataForm = _dataAll
            },
        },
    }

</script>
